<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 150px;
            height: 400px;
            background-color: #ffee88;
        }
        #h{
            height: 30px;
            background-color: red;
            color: white;
        }
        #b{
            background-color: #ff00ff;
        }

        li{
            list-style: none;
            position: relative;
            left: -35px;
        }

        a{
            text-decoration: none;
        }
    </style>
    <script>
        function f(index){
            var obj=document.getElementById("u"+index);

            if(obj.style.display=="none") {
                obj.style.display = "block";
            }else{
                obj.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <div id="d1">
        <div id="h">
            菜单
        </div>
        <div id="b">
            <ul>
                <li><a href="javascript:;" onclick="f(1);">menu1</a></li>
                <ul id="u1" style="display: none;">
                    <li>item1</li>
                    <li>item2</li>
                </ul>
                <li><a href="javascript:;" onclick="f(2);">menu2</a></li>
                <ul id="u2" style="display: none;">
                    <li>item3</li>
                    <li>item4</li>
                </ul>
            </ul>
        </div>
    </div>
</body>
</html>